Few Guesses, More Success: 4 Principles to Reduce Cognitive Load in Forms降低認知負擔的四項原則

表單的每個欄位都需要使用者解讀問題、查詢資訊並以正確格式填寫，這些都會增加使用者的認知負擔。當負擔過大時，使用者容易出錯、感到疲憊甚至放棄填寫。因此，應遵循以下四個原則，幫助使用者以更少的思考、更高的信心完成表單：

1. Structure（結構）：以邏輯清晰的方式組織內容，建立明確的填寫路徑

2. Transparency（透明性）：在開始前就傳達要求，設定預期

3. Clarity（清晰性）：使內容易懂，避免歧義

4. Support（輔助性）：在填寫過程中提供及時有效的幫助

Structure 結構，組織內容邏輯，建立明確路徑

人腦天生善於識別資訊間的模式和關係。邏輯清晰的結構能幫助使用者理解整體內容，從而更高效地完成表單。

Group Related Fields 分組相關欄位

相關欄位如使用者名稱與密碼、地址與城市等，通常被同時提問。合理分組能幫助使用者更快回憶資訊。Coinbase 將姓名、出生日期（年、月、日）、地址、城市、州、郵政編碼等相關欄位放在一起，使用者更容易填寫。但建議避免將標籤放置在輸入框中或採用多欄佈局。

在整個表單層級，將欄位按主題劃分為多個版塊有助於：

• 使用者集中處理某一類別資訊

• 減少頻繁切換話題的疲勞

• 每完成一個部分都能感到進展

Create Visual Hierarchy 建立視覺層級

透過統一的間距、排版和樣式來引導使用者注意力，理清表單內部的關係。Stripe 使用了統一間距來組織資訊。地址相關欄位之間間距較小，而與不相關欄位（如電子郵件）間距更大。但示例中使用了佔位符文字，增加了認知負擔。

如果間距不足以表達資訊關係，還可以使用容器、分割線或背景色增強群組感。HoneyBook 使用容器將“賬戶資訊”和“更改密碼”分為兩個明確的部分。

字型大小、粗細、顏色對比也可營造視覺層級。Quicken 表單使用不同的字型大小、粗細和顏色明確區分標題、欄位標籤、提示文字和錯誤資訊。

Sort Questions and Options in a Logical Order 合理排序問題和選項

好的表單排序像一段自然的對話。排列順序需考慮填寫邏輯和使用者認知流：

• 熟悉性：從姓名、電郵等常見資訊開始

• 優先順序：先問關鍵內容

• 依賴性：後面問題建立在前面基礎上

• 複雜度：先易後難

• 敏感性：先問不敏感問題

即使沒有條件分支邏輯，也應採用合適排序來減少使用者負擔。比如ZIP 碼在前可用來自動填寫城市和州，減少使用者輸入。

Use Single-Column Layout 使用單欄佈局

研究表明單欄佈局比多欄結構在完成率上更優。單欄佈局提供清晰的垂直路徑，易於閱讀和裝置適配。

× Discover Bank 表單使用了多欄佈局且欄位標籤為佔位符文字，容易導致使用者漏看欄位或理解順序出錯。

Utilize Progressive Disclosure 採用漸進式資訊展示

長表單可能讓使用者望而卻步。可透過多頁分步驟方式逐步展示，或根據前面回答動態顯示後續欄位（條件邏輯）。

Visible 的註冊流程拆分為多頁，並在頂部設定進度條，減輕資訊過載。但建議避免使用滾輪選擇器選擇出生年份，該互動可讀性差、操作成本高。

Transparency 透明性

Communicate Form Requirements Before Users Begin 填寫前傳達表單要求

告知使用者填寫所需資訊與耗時，有助於他們判斷是否開始填寫，特別是複雜、多頁、無法儲存進度的表單。Zillow 在設定房租支付流程前，展示需要準備的檔案清單。

Mark Required Fields 標註必填欄位

非必要問題應慎重使用。若需使用，應明確標示“可選”欄位，避免使用者誤認為必須填寫。Klaviyo 在欄位旁標註紅色星號代表“必填”，並用文字標明“可選”，讓使用者清楚區分哪些可以跳過。

Show Clear Progress Indicators 顯示清晰進度指示器

進度視覺化能讓使用者知道自己處於流程哪一步，增強控制感，也激發完成的動力。也有助於構建表單整體結構的心理模型。Google Analytics 在設定介面中展示“第 3 步，共 5 步”的進度條，清晰傳達完成度。

Clarity 清晰性

Use Plain Language 使用簡潔語言

避免使用行業術語或公司內部專有詞，應以普通使用者的語言呈現。“主訴”可替換為“就診原因”，“是否接受過手術”比“請列舉外科治療史”更易理解。建議語言整體難度維持在 6～8 年級水平。

Use Positive Wording 採用正面措辭

Udemy的設計要求使用者勾選核取方塊以拒絕接收促銷郵件，且勾選後會自動取消選中上方的核取方塊。這種複雜設計造成了不必要的混淆。更合理的做法是直接詢問使用者是否希望接收促銷郵件，然後提供選項讓使用者指定他們偏好的內容型別。

Avoid Double-Barreled Questions 避免雙重提問

一個調查問題問"我們的網站是否有幫助且易於導航？"迫使使用者對兩個不同問題給出單一答案。使用者可能覺得內容有幫助但導航混亂，反之亦然。

為消除歧義，應一次只問一件事："我們的網站內容有多大幫助？"然後是"我們的網站導航有多容易？"這不僅降低認知負擔，還能收集更準確反映使用者體驗的資料。

Provide Context and Examples 提供上下文與示例

對於有特定格式要求的輸入，如日期或編號，應明確說明格式和示例，減少猜測和錯誤。

Dyson 在使用者填寫序列號時，提供了序列號的位置和格式說明，使使用者快速定位並正確輸入。

Follow Conventions for Form Elements 遵循表單控制元件慣例

控制元件行為應符合常見使用習慣，避免設計創新破壞使用者熟悉的互動模式。

Squarespace 採用了一種非常規的單選按鈕選中樣式：不是使用填充圓圈，而是顯示一個對勾標記並高亮整行。這種設計打破了網頁慣例，可能會導致使用者質疑這些是否真的是單選按鈕。

Match Input-Field Length to Expected Content 匹配欄位長度與內容長度

欄位長度應與期望輸入匹配，提示使用者輸入範圍。過長或過短的欄位都可能讓使用者產生疑問。

NAIC 的表單所有欄位長度相同，導致“電話”、“城市”等欄位長度過長，破壞認知一致性。

Support 輔助性

Avoid Using Placeholders 避免使用佔位符

佔位符（輸入框內點選後消失的文字）看似節省空間，但實際會導致嚴重的可用性問題：

• 輸入時消失，迫使使用者依靠短期記憶記住指示

• 通常使用低對比度的淺灰色文字，難以閱讀

• 容易被誤認為預填值，導致使用者忽略或跳過欄位

更好的做法是：將標籤和幫助文字放在輸入框外，保持輸入框為空。這樣無論使用者正在填寫還是檢查內容，都能隨時看到指引。

佔位符在開始輸入後會消失，增加短期記憶負擔，且易讀性差、易誤解為預設值。應將提示文字和標籤置於欄位外部。

Stripe 使用灰色佔位符提供示例資訊，但可讀性差，且可能被誤認為預填內容。

Include Helpful Constraints 施加合理限制

在可預測情況下，提前限制錯誤輸入優於事後報錯。例如，在轉賬表單中，防止輸入超過賬戶餘額的金額。SoFi 限制轉賬金額不能超過賬戶餘額，超過時以暗背景與錯誤提示明確告知。

Display Timely, Visible Error Messages 實時、明確地顯示錯誤提示

每個人都會犯錯，關鍵是要在合適的時候提供幫助，不要打斷使用者。好的設計應該讓使用者自由操作，同時及時糾正錯誤。

1. 避免過早驗證：不要在使用者剛開始輸入時就顯示錯誤提示，這會打擾使用者。應該等使用者完成輸入並移到下一個欄位後再顯示錯誤。

2. 謹慎使用實時驗證：只在確實需要即時反饋（比如顯示密碼要求）或防止嚴重錯誤時才使用實時驗證，否則會分散使用者注意力。

為了減輕思考負擔，錯誤提示應該直接顯示在出錯的欄位旁邊。如果錯誤提示出現在彈窗或離欄位很遠的地方，使用者就需要記住這些資訊才能修改錯誤，增加思考負擔。

Urban Outfitters 將優惠碼錯誤提示放在頁面頂部，距離欄位過遠，增加使用者的認知負擔。

錯誤提示應具有指導性，而非只是指出問題，應幫助使用者改正。Etsy 在使用者名稱不可用時，不僅提示錯誤，還根據使用者輸入建議多個可用名稱，幫助使用者順利完成註冊。

Conclusion 總結

填寫表單如同攀登高峰，使用者需要遵循“結構、透明性、清晰性、輔助性”四大原則，能顯著降低認知負擔，讓表單更容易被完成，資訊收集更加有效。